<!--
 * @描述信息: 系统工具
 * @Author:  zls
-->
<template>
  <div class="systemTools">
    <div>
      <h1 style="font-size: 30px">测试pinia状态管理</h1>
      <div style="margin-top: 30px">
        <div>
          Pinia的state: count = <b>{{ count }}</b>
        </div>
        <button @click="COUNT_ADD">点我(count++)</button>
        <button @click="CUONT_DOUBLE">点我(count双倍)</button>
        <div>获取getters中的count值:{{ COUNT_GETTERS() }}</div>
      </div>
      <div style="margin-top: 30px">
        <div>
          Pinia的state: count = <b>{{ stores.piniaDemo2.count }}</b>
        </div>
        <button @click="stores.piniaDemo2.COUNT_ADD">点我(stores.piniaDemo2.count++)</button>
        <button @click="stores.piniaDemo2.CUONT_DOUBLE">点我(count双倍)</button>
        <div>获取getters中的count值:{{ stores.piniaDemo2.COUNT_GETTERS() }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import stores from '@/stores'
const { count } = storeToRefs(stores.piniaDemo1) // 解构数据（使用storeToRefs将pinia中的数据变为响应式的）
const { COUNT_ADD, CUONT_DOUBLE, COUNT_GETTERS } = stores.piniaDemo1 // 解构方法
</script>

<style lang="scss" scoped>
.systemTools {
}
</style>
